<template>
    <div>
        <h3>电影影评</h3>
        <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="用户名:">
            <el-input v-model="userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="电影名:">
            <el-input v-model="movieName" placeholder="请输入电影名"></el-input>
          </el-form-item>
          <el-form-item label="评分:">
            <el-select v-model="star" placeholder="请选择">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >  
                </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
        </div>
        <el-table
        :data="clist"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
        >
        <el-table-column
        prop="username"
        label="用户"
        sortable
        width="180">
        </el-table-column>
        <el-table-column
        prop="mname"
        label="电影名"
        sortable
        width="180">
        </el-table-column>
        <el-table-column
        prop="content"
        label="评论内容">
        </el-table-column>
        <el-table-column
        prop="ctime"
        label="评论时间">
        </el-table-column>
        <el-table-column
        prop="star"
        label="评分">
        </el-table-column>
         <el-table-column label="操作">
            <template slot-scope="scope">
                <!-- <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">屏蔽评论</el-button>     
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNow"
            :page-sizes="[2, 4, 8, 16]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
    </div>
    </div>
</template>
<script>
export default {
    data() {
        return{
            options: [
                {
                value: '',
                label: '请选择'
                },
                {
                value: '10',
                label: '10'
                }, {
                value: '9',
                label: '9'
                }, {
                value: '8',
                label: '8'
                }, {
                value: '7',
                label: '7'
                },{
                value: '6',
                label: '6'
                },{
                value: '5',
                label: '5'
                },{
                value: '4',
                label: '4'
                },{
                value: '3',
                label: '3'
                },{
                value: '2',
                label: '2'
                }, {
                value: '1',
                label: '1'
                }],
            pageNow:1,
            pageSize:10,
            total:0,
            userName:'',
            movieName:'',
            star:'',
            clist:[],
            status:1,
            id:1,
            comments:{
                username:'',
                moviename:'',
                content:'',
                ctime:'',
                status:'',
                star:''
            }
        }
    },
    mounted:function(){
        this.onSubmit();
    },
    methods:{                                           //star评分可以用element组件
        formatter(row, column) {
        return row.address;
        },
        onSubmit(){
          this.pageNow=1;
          this.pageSize=10;
          this.init();
         },
        init(){
          this.$axios.get("http://localhost:8080/admin/comment/list",{
              params:{
                  userName:this.userName,
                  movieName:this.movieName,
                  star:this.star,
                  pageNow:this.pageNow,
                  pageSize:this.pageSize
              }
            }).then(data=>{
              console.log(data.data.data.list);
              if(data.data.code==200){
                 this.clist=data.data.data.list;
                 this.total=data.data.data.total;
                 this.pageNow=data.data.data.pageNum;
                 this.pageSize=data.data.data.pageSize;
              }
          })
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`);
          this.pageSize = val;
          this.init();
         },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNow = val ;
            this.init();
        },
        // handleEdit(index, row) {        //修改评论
        //     console.log(index, row);

        // },
        handleDelete(index, row) {      //删除评论  （把状态status变为0）
            console.log(index, row);
            console.log(row.id)
            this.$axios.get("http://localhost:8080/admin/comment/reset",{
                params:{
                    id:row.id 
                }            
            })
            .then(data=>{
                //console.log(data)
                if(data.data.code=200){
                    alert("屏蔽评论成功")
                }else{
                    alert("屏蔽评论失败")
                }
            })
        },
        
    }
}
</script>
<style scoped>

</style>